<template>
  <div >
     <div class="log-wrap">
       <div class="log-box">
         <div class="log-header">
           <img  class="header" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563863194273&di=d7de421f687fa2d93a7ad4617aac2e89&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201505%2F28%2F20150528130730_rWnTt.jpeg" alt="">
         </div>
         <div class="log-handle" @click="tologin" v-if="flag">
           登录/注册
         </div>
         <div class="name" v-else>
           <p>{{myid}}</p>
           <p>{{myp}}</p>
         </div>

       </div>
     </div>
     <div class="mymenu-wrap">
       <div class="mymenu">
         <div class="menu">
           <img class="menu-i" src="../../../static/images/kanjia.png" alt="" />
           <p>我的砍价</p>
         </div>
         <div class="menu">
           <img class="menu-i" src="../../../static/images/choujiang.png" alt="" />
           <p>我的抽奖</p>
         </div>
         <div class="menu">
            <img class="menu-i" src="../../../static/images/pintuan.png" alt="" />
            <p>我的拼团</p>
          </div>
         <div class="menu">
           <img class="menu-i" src="../../../static/images/zhuli.png" alt="" />
           <p>我的助力</p>
         </div>
       </div>
     </div>
     <div class="nav-wrap">
       <div class="nav-box">
         <div class="ad-wrap">
           <div class="ad">
             <img class="ad-i" src="http://img.alicdn.com/i2/2/TB12cBSirGYBuNjy0FoXXciBFXa?abtest=&pos=8&abbucket=&acm=03014.1003.1.765824&scm=1007.13143.56636.100200300000000_90x90q90.jpg" alt="" />
           </div>
         </div>
         <div class="nav-choose">
           优惠劵
           <img class="jd" src="../../../static/images/youjiantou.png" alt="" />
         </div>
         <div class="nav-choose">
           鲜豆
           <img class="jd" src="../../../static/images/youjiantou.png" alt="" />
         </div>
         <div class="nav-choose">
           礼品卡
           <img class="jd" src="../../../static/images/youjiantou.png" alt="" />
         </div>
         <div class="nav-choose"  @tap="toadress" v-if="flag===false">
           我的地址
           <img class="jd" src="../../../static/images/youjiantou.png" alt="" />
         </div>
         <div class="nav-choose"  @tap="tologin" v-else >
           我的地址
           <img class="jd" src="../../../static/images/youjiantou.png" alt="" />
         </div>

       </div>


     </div>
    <div class="drop" v-if="flag===false" @click="handledropout">
      退出登录

    </div>

  </div>
</template>

<script>
// Use Vuex


export default {
  data(){
    return{
      flag:false,
      myid:"",
      myp:""
    }

  },

  methods: {
    handledropout(){
      this.global.myTel="";
      this.global.myID="";
      this.flag=true;
      this.global.loginflag=true;
      console.log(this.flag);
    },
    toadress(){
      wx.navigateTo({
        url:'/pages/toadress/main'
      })
    },
    tologin(){
      wx.navigateTo({
        url: '/pages/tologin/main'
      })
    },
    // geTel(tel){
    //     var reg = /^(\d{3})\d{4}(\d{4})$/;
    //   return tel.replace(reg, "$1****$2");
    //   }
    geTel(tel){
      return tel.substring(0, 3)+"****"+tel.substr(tel.length-4);
    }
  },


  onShow() {
    // console.log('onShow监听小程序显示');
    this.flag=this.global.loginflag;
    this.myid=this.global.myID;
    this.myp=this.global.myTel;
    if(this.myp.length===11){
      this.myp=this.geTel(this.myp);
    }
  },


}
</script>

<style scoped>
.log-wrap{
  background-color: #49B152;
  width:100%;
  height: 200rpx;
  display: flex;
  align-items: center;
}
.log-box{
  width:90%;
  margin:0 auto;
  display: flex;
  align-items: center;
}
  .log-header{
    height: 150rpx;
    width:150rpx;

  }
  .header{
    height: 100%;
    width:100%; border-radius:50%;
  }
  .log-handle{
    height: 50rpx;
    width:200rpx;
    text-align: center;
    border:1px solid #ffffff;
    color:#fff;
    margin-left: 20rpx;
  }
  .mymenu-wrap{
    width:100%;
    background:#fff;
    height: 220rpx;
    border-radius:20rpx;
    margin-top:24rpx;
  }
  .mymenu{
    width:90%;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  .menu{
    width:24%;

    display: flex;
    flex-direction: column;
    align-items: center;

  }
  .menu-i{
    width: 40rpx;
    height: 40rpx;
  }
  .nav-wrap{
    width:100%;
    height: 660rpx;
    background-color: #ffffff;
    margin-top:20rpx;
    border-radius:22rpx;
  }
  .nav-box{
    width: 90%;
    height: 100%;
    margin:0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;

  }
.ad-wrap{
  height: 200rpx;
  width:100%;
  display:flex;
  align-items:center;


}
  .ad{
    height: 129rpx;
    background-color: #0081ff;
    border-radius:75rpx;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

  }
  .ad-i{
    height: 120rpx;
    width:75%;
  }
  .jd{
    height: 40rpx;
    width:40rpx;
  }
.nav-choose{
  width:100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:1px solid #cccc;
}
  .drop{
    width:100%;
    height: 100rpx;
    margin-top:20rpx;
    color:#49B152;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:20rpx;

  }
  .name{
    color: #ffffff;
    margin-left: 22rpx;
  }


</style>
